import React, { useState } from 'react';
import { Search } from 'react-vant';
import { Toast, NavBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { Button } from 'react-vant'
import './index.css'
function index() {
    const navigate = useNavigate()
    const [value, setValue] = useState('')
    const [verificationCode, setVerificationCode] = useState(''); // 验证码
    function generateFourDigitCode() {
        return Math.floor(1000 + Math.random() * 9000).toString();
    }

    function handleClick() {
        const newCode = generateFourDigitCode();
        setVerificationCode(newCode);
    }
    return (
        <div>
            <NavBar
                title='服务激活'
                leftText='返回'
                onClickLeft={() => navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />

            <div className='servicebox'>
                <img src="../src/assets/711.jpg" alt="" />
            </div>
            <div>
                <Search value={verificationCode} onChange={setValue} clearable placeholder="请输入激活码" />
            </div>

            <div>
                 {/* <p>验证码: {verificationCode}</p> */}
                <Button type='primary' block round  onClick={handleClick}>
                    立即激活
                </Button>
            </div>
            <div>

            </div>
        </div>
    )
}

export default index